<template>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[3, 6, 9, 12]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
  </div>
</template>

<script>
import {createNamespacedHelpers} from "vuex";
const {mapState:mapStateCar,mapActions:mapActionsCar}=createNamespacedHelpers("carModule")
export default {
  data() {
    return {
      currentPage: 1,
      pageSize:3,
    };
  },
  computed:{
      ...mapStateCar(["total"])
  },
  methods: {
      ...mapActionsCar(["getCars"]),
      //改变每页显示个数
    handleSizeChange(val) {
     this.getCars({start:0,count:val})
     this.pageSize=val
     this.currentPage=0
    },
    //改变页数
    handleCurrentChange(val) {
      this.getCars({start:this.pageSize*(val-1),count:this.pageSize})
      this.currentPage=this.pageSize*val/this.pageSize
    }
  }
};
</script>

<style lang="less" scoped>
.block{
    margin-top: 30px;
}
</style>